<?php

/* @var $this yii\web\View */

use yii\helpers\Html;
use yii\helpers\Url;
use app\models\Message;
use app\assets\ComposeAsset;

ComposeAsset::register($this);
$this->title = '消息内容';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="page-title">
  <div>
    <h1><i class="fa fa-envelope"></i> 消息内容</h1>
    <ul class="breadcrumb side">
      <li><i class="fa fa-home fa-lg"></i></li>
      <li><a href="<?=Url::toRoute('site/messages')?>">消息管理</a></li>
      <li class="active"><a href="#">消息内容</a></li>
    </ul>
  </div>
</div>

<div class='card'>
  <?php
  if(is_null($model)){
  ?>
  <div class='well well-lg'>
    未发现消息内容
  </div>
  <?php
  }else{
   ?>
  <h4 id='msg-header' msgid='<?=Html::encode($model->id)?>'><i class="fa fa-envelope"></i> 标题：<?=Html::encode($model->title)?></h4>
  <a class="pull-right" href="#" id="message-reply"><i class="fa fa-reply"></i> 回复</a>
  <p style='color:#888;'>
    <span><i class="fa fa-user"></i> 发信人：<?=Html::encode($model->sender0->name)?></span>
    <span><i class="fa fa-calendar" style='padding-left:20px;'></i> 发送时间：<?=Yii::$app->formatter->asRelativeTime($model->dt, time())?></span>

  </p>
  <div class='well well-lg'><?=$model->content?></div>
  <?php
  }
   ?>
</div>


<!-- compose -->
<div class="compose">
  <div class="compose-header btn-warning">
    回复消息
    <button type="button" class="close compose-close">
      <span>×</span>
    </button>
  </div>

  <div class="compose-body">
    <div id="alerts"></div>
    <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" title="字体尺寸"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a data-edit="fontSize 5">
              <span style="font-size:17px">大</span>
            </a>
          </li>
          <li>
            <a data-edit="fontSize 3">
              <span style="font-size:14px">中</span>
            </a>
          </li>
          <li>
            <a data-edit="fontSize 1">
              <span style="font-size:11px">小</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="btn-group">
        <a class="btn" data-edit="bold" title="加粗 (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
        <a class="btn" data-edit="italic" title="斜体 (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
        <a class="btn" data-edit="strikethrough" title="删除线"><i class="fa fa-strikethrough"></i></a>
        <a class="btn" data-edit="underline" title="下划线 (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
      </div>

      <div class="btn-group">
        <a class="btn" data-edit="insertunorderedlist" title="项目符号"><i class="fa fa-list-ul"></i></a>
        <a class="btn" data-edit="insertorderedlist" title="编号"><i class="fa fa-list-ol"></i></a>
        <a class="btn" data-edit="outdent" title="减少缩进 (Shift+Tab)"><i class="fa fa-dedent"></i></a>
        <a class="btn" data-edit="indent" title="缩进 (Tab)"><i class="fa fa-indent"></i></a>
      </div>

      <div class="btn-group">
        <a class="btn" data-edit="justifyleft" title="左对齐 (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
        <a class="btn" data-edit="justifycenter" title="居中 (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
        <a class="btn" data-edit="justifyright" title="右对齐 (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
        <a class="btn" data-edit="justifyfull" title="两端对齐 (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
      </div>

      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" title="超链接"><i class="fa fa-link"></i></a>
        <div class="dropdown-menu input-append">
          <input class="span2" placeholder="URL" type="text" data-edit="createLink" />
          <button class="btn" type="button">添加</button>
        </div>
        <a class="btn" data-edit="unlink" title="移除超链接"><i class="fa fa-cut"></i></a>
      </div>
      <div class="btn-group">
        <a class="btn" data-edit="undo" title="拆销 (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
        <a class="btn" data-edit="redo" title="重做 (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
      </div>
    </div>

    <div id="editor" class="editor-wrapper"></div>
  </div>

  <div class="compose-footer">
    <div class='form-inline'>

      <div class='col-md-6 form-group'>
        <div class='input-group'>
            <span class="input-group-addon" id="receiver-label" >收信人</span>
            <?= Html::textInput('message-receiver','',[
              'id'=>'message-receiver',
              'class'=>'form-control',
              'placeholder'=>'请指定收信人的会员名',
              'aria-describedby'=>"receiver-label"
              ])?>
            <span class="input-group-btn">
              <button class="btn btn-warning" type="button" style='padding:8px 12px 7px 12px;' id='send'>发送</button>
            </span>
        </div>
      </div>
      <div class='col-md-6 form-group'>
        <button id="save" class="btn btn-sm btn-info" type="button"  style='padding:8px 12px 7px 12px;width:100%;'>保存为草稿</button>
      </div>
    </div>
    <div class='clearfix'></div>
  </div>
</div>

<!-- /compose -->
<?php $this->beginBlock('compose-js') ?>
/* WYSIWYG EDITOR */

function init_wysiwyg() {

if( typeof ($.fn.wysiwyg) === 'undefined'){ return; }
console.log('init_wysiwyg');

   function init_ToolbarBootstrapBindings() {
     var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
         'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
         'Times New Roman', 'Verdana'
       ],
       fontTarget = $('[title=Font]').siblings('.dropdown-menu');
     $.each(fonts, function(idx, fontName) {
       fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
     });
     $('a[title]').tooltip({
       container: 'body'
     });
     $('.dropdown-menu input').click(function() {
         return false;
       })
       .change(function() {
         $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
       })
       .keydown('esc', function() {
         this.value = '';
         $(this).change();
       });

     $('[data-role=magic-overlay]').each(function() {
       var overlay = $(this),
         target = $(overlay.data('target'));
       overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
     });

     if ("onwebkitspeechchange" in document.createElement("input")) {
       var editorOffset = $('#editor').offset();

       $('.voiceBtn').css('position', 'absolute').offset({
         top: editorOffset.top,
         left: editorOffset.left + $('#editor').innerWidth() - 35
       });
     } else {
       $('.voiceBtn').hide();
     }
   }

   function showErrorAlert(reason, detail) {
     var msg = '';
     if (reason === 'unsupported-file-type') {
       msg = "Unsupported format " + detail;
     } else {
       console.log("error uploading file", reason, detail);
     }
     $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
       '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
   }

  $('.editor-wrapper').each(function(){
 var id = $(this).attr('id');	//editor-one

 $(this).wysiwyg({
   toolbarSelector: '[data-target="#' + id + '"]',
   fileUploadError: showErrorAlert
 });
});


   window.prettyPrint;
   prettyPrint();

};


/* COMPOSE */

function init_compose() {
  if( typeof ($.fn.slideToggle) === 'undefined'){ return; }
  console.log('init_compose');

  $('.compose-close').click(function(){
    $('.compose').slideToggle();
  });

};
$(document).ready(function() {
  init_wysiwyg();
  init_compose();

  //回复消息
  $('#message-reply').click(function(){
    var mymsgid=$('#msg-header').attr('msgid');
    $.ajax({
      url:"<?=Url::toRoute('site/getmsgsender')?>",
      type:"get",
      datatype:"json",
      cache:false,
      data:{
        msgid:mymsgid
      },
      success:function(data){
         var obj = JSON.parse(data);
         if(obj.errcode===0){
           $('.compose').slideToggle();
           $('#message-receiver').val(obj.errmsg);
         }
      },
      error:function(jqXHR,textStatus,errorThrown){
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
      }
    });

  });

  //设置消息已读(调用的服务端功能与获取消息内容相同)
  var mymsgid=$('#msg-header').attr('msgid');
  $.ajax({
      url:"<?=Url::toRoute('site/getmsgcontent')?>",
      type:"get",
      datatype:"json",
      cache:false,
      data:{
        msgid:mymsgid,
        issetreaded:1
      },
      success:function(data){
         var obj = JSON.parse(data);
         if(obj.errcode===0){
         }
      },
      error:function(jqXHR,textStatus,errorThrown){
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
        $('.compose').slideToggle();
      }
    });

});

<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['compose-js'],\yii\web\View::POS_END); ?>
